<template>
  <div v-if="menuing" id="menu" class="guide">
    <div class="menuing pop-item">
      <div class="god people waiting">
        <img class="avatar" :src="orderingCus.avatar" alt="">
      </div>
      <h3 class="title">{{orderingCus.name.substring(0,4)}}...正在点菜，已点 {{pay}} 元的菜</h3>
      <div class="ment-list">
        <div class="list" v-for="menu in menuList" :key="menu.id">
          {{menu.typeName}}
          <ul @change="order">
            <li class="list-item" v-for="sm in menu.foodList" :key="sm.id">
              <div>
                <input type="checkbox" v-model="sm.ordered" :disabled="sm.disd">
                <label :for="sm.id" style="margin-left: 0.4rem">{{sm.name}}</label>
              </div>
              <p>.......................￥{{sm.price}}</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="bottom">
        <p class="button" style="width: 60%" :class="canOrdered?'':'not-active'" @click="menuOK">点好了，快上菜</p>
        <p class="button" style="width: 34%" @click="leaveing">不吃了</p>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {mapMutations} from 'vuex'

export default {
  data() {
    return {
      pay: 18,
      menuList: [
        {
          id: 1,
          typeName: '凉菜(二选一, 可不点)',
          selectedList: [],
          maxLen: 1,
          foodList: [
            {
              id: 101,
              name: '凉拌SAN',
              price: 6,
              doingTime:100
            },
            {
              id: 102,
              name: '冷切DOM',
              price: 4,
              doingTime:100
            },
          ]
        },
        {
          id: 2,
          typeName: '主菜(五选一, 必点)',
          selectedList: [],
          maxLen: 1,
          minLen: 1,
          foodList: [
            {
              id: 201,
              name: 'UL炖LI',
              price: 12,
              doingTime:500
            },
            {
              id: 202,
              name: '红烧HEAD',
              price: 15,
              doingTime:200
            },
            {
              id: 203,
              name: '酥炸ECharts',
              price: 18,
              doingTime:600
            },
            {
              id: 204,
              name: '炙热CSS',
              price: 16,
              doingTime:300
            },
            {
              id: 205,
              name: '清蒸DIV',
              price: 12,
              doingTime:100
            },
          ]
        },
        {
          id: 3,
          typeName: '饮品(二选一, 可不点)',
          selectedList: [],
          foodList: [
            {
              id: 301,
              name: '鲜榨flex',
              price: 5,
              doingTime:80
            },
            {
              id: 302,
              name: '小程序奶茶',
              price: 6,
              doingTime:80
            },
          ]
        },
      ],
      canOrdered: false,
      submit: false,
      orderedList:[]
    }
  },
  computed: {
    ...mapState([
      'menuing',
      'orderingCus'
    ])
  },
  created() {
    this.initMenu()
  },
  methods: {
    ...mapMutations([
      'leave',
      'sitDown'
    ]),
    initMenu() {
      this.canOrdered = false
      this.menuList.forEach((menu) => {
        menu.selectedList = [];
        menu.maxLen = 1
        if (menu.id === 2) {
          menu.minLen = 1
        } else {
          menu.minLen = 0
        }
        menu.foodList.forEach((sm) => {
          sm.ordered = false
          sm.disd = false
        })
      })
      this.orderedList = []
      this.pay = 0
    },
    SumPrice(e) {
      console.log(e)
    },
    isDisabled(menu, subMenu) {
      if (menu.maxLen && menu.selectedList.length >= menu.maxLen) {
        menu.selectedList.forEach((item) => {
          if (item.id === subMenu.id) {
            return true;
          }
        })
      }
      return false;
    },
    // 计算菜价和菜单
    order() {
      let sum = 0
      this.canOrdered = true
      this.menuList.forEach((menu) => {
        let list = []
        menu.foodList.forEach((sm) => {
          if (sm.ordered === true) {
            list.push(sm)
            sum += sm.price
          }
        })
        menu.selectedList = list
        if (menu.selectedList.length < menu.minLen) {
          this.canOrdered = false
        }
        if (menu.selectedList.length >= menu.maxLen) {
          menu.foodList.forEach((sm) => {
            sm.disd = !sm.ordered
          })
        } else {
          menu.foodList.forEach((sm) => {
            sm.disd = false
          })
        }
      })
      this.pay = sum
    },
    // 提交订单
    menuOK(){
      if (this.canOrdered === false){
        return
      }
      this.menuList.forEach((menu) => {
        menu.foodList.forEach( (sm)=> {
          if (sm.ordered === true){
            sm.patience = 100
            sm.state = 'waiting'
            this.orderedList.push(sm)
          }
        })
      })
      this.sitDown([this.orderedList,this.pay])
      this.initMenu()
    },
    // 不点了
    leaveing() {
      this.canOrdered = false
      this.initMenu()
      this.leave()
    }
  }
}
</script>

<style scoped>

  .avatar {
    width: 4rem;
  }

  .god {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
  }

  .title {
    text-align: right;
    margin-bottom: 1rem;
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .ment-list {
    color: #937011;
    background-color: white;
    border: 0.2rem solid #ca9801;
    min-height: 17rem;
    margin-bottom: 0.5rem;
  }

  .not-active {
    opacity: 0.5;
  }

  .list {
    width: 90%;
    margin: 0.5rem auto;
  }

  .list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 1rem;
    line-height: 1.2rem;
  }
</style>